<template>
  <div class="bg-gray-100 min-h-screen p-2 bg-gradient-to-r from-blue-200 via-blue-300 to-blue-400">
    <h1 class="text-2xl font-semibold text-blue-600 mb-2">已拍摄视频预览</h1>
  <div v-if="templateVideo.name  && templateVideo.previewUrl"  class="p-6">
    <h2 class="text-2xl font-bold mb-4">{{ templateVideo.name  }}</h2>
    <video
        :src="templateVideo.previewUrl"
        controls
        class="w-full max-w-lg rounded-lg shadow-md"
        @error="handleVideoError"
    >
      您的浏览器不支持视频播放。
    </video>
  </div>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import {  reactive, watch } from "vue";
import { ElMessage } from "element-plus";

const route = useRoute();
const templateVideo = reactive({
  name: "",
  previewUrl: ""
});

const initData = () => {
  const name = route.query.name  || localStorage.getItem('name')  || "";
  const previewUrl = route.query.previewUrl  || localStorage.getItem('previewUrl')  || "";

  if (name && !templateVideo.name)  {
    templateVideo.name  = name;
  }
  if (previewUrl && !templateVideo.previewUrl)  {
    templateVideo.previewUrl  = previewUrl;
  }
};

watch(() => route.query,  (newQuery) => {
  if (newQuery.name  || newQuery.previewUrl)  {
    initData();
  }
}, { immediate: true });

const handleVideoError = () => {
  ElMessage.error(" 视频加载失败，请检查URL格式");
};
</script>